<template>
  <div class="container-box">
    <div class="login-header-banner">
      <div class="login">
        <div class="login-title">
          <div class="login-line"></div>
          <h2 class="login-txt">小影悦览管理系统</h2>
          <div class="login-form">
            <div class="username">
              <i class="iconfont">&#xea94;</i>
              <el-input
                class="userNameinput"
                ref="username"
                v-model="loginForm.userName"
                placeholder="请输入用户名"
                name="username"
                type="text"
                tabindex="1"
                auto-complete="on"
              />
            </div>
            <div class="password">
              <i class="iconfont">&#xe65d;</i>
              <el-input
                class="passwordinput"
                :key="passwordType"
                ref="password"
                :type="passwordType"
                v-model="loginForm.password"
                name="password"
                tabindex="2"
                auto-complete="on"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              />
            </div>
            <div class="login-btn">
              <el-button
                :loading="loading"
                class="btns"
                type="primary"
                @click.native.prevent="handleLogin"
                >登录</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="login-banner"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        userName: "",
        password: ""
      },
      loading: false,
      passwordType: "password",
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      // console.log(this.loginForm);
      this.loading = true;
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || "/" });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.container-box {
  background-color: #ffffff;
  width: 100%;
  height: 100%;

  .login-header-banner {
    width: 100%;
    height: 100%;
    background: url("../../assets/login/login-header-banner.png") no-repeat
      center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    box-sizing: border-box;
    .login {
      width: 400px;
      height: 400px;
      // background-color: #ccc;
      .login-title {
        display: flex;
        flex-direction: column;
        .login-line {
          margin-top: 10px;

          width: 100px;
          height: 6px;
          background-color: #067ef8;
        }
        .login-txt {
          margin-top: 30px;
          letter-spacing: 5px;
          font-size: 30px;
        }
        .login-form {
          ::v-deep .el-input--small .el-input__inner {
            border: none !important;
            font-size: 20px;
          }
          ::v-deep .el-input__inner {
            padding: 0 0 0 0;
            border: none !important;
            padding-left: 10px;
          }
          .username,
          .password {
            margin-top: 30px;
            width: 100%;
            height: 40px;
            // background-color: #ccc;
            border-bottom: 2px solid #f2f2f2;
            display: flex;
            // padding-bottom: 8px;
            align-items: center;
          }
          .login-btn {
            .btns {
              margin-top: 30px;
              width: 100%;
              height: 40px;
              font-size: 20px;
            }
          }
        }
      }
    }
    .login-banner {
      width: 700px;
      height: 500px;
      background: url("../../assets/login/login-banner.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}

.iconfont {
  color: #198bfe;
  font-size: 20px;
  padding-left: 10px;
}
</style>
